<!--
*@Author: QWP
*@Description: 首页-日程详情
*@Date: 2024-07-14 22:16:20
-->
<template>
  <a-spin :spinning="loading">
    <div>
      <a-timeline v-if="data.length">
        <a-timeline-item v-for="item in data">
          <a-row class="u-date-text">
            {{ item.starttime }}-{{ item.endtime }}
          </a-row>
          <div class="u-detil-box"
            :style="{'--bg': item.bgColor || '#F2F2F2'}">
            <a-space direction="vertical">
              <a-row class="u-detial-title"> {{ item.theme }} </a-row>
              <a-row class="u-detial-desc"> {{ item.content }} </a-row>
            </a-space>
          </div>
        </a-timeline-item>
      </a-timeline>
      <template v-else> 
        <a-row justify="center" style="padding: 20px 0;">
          <a-image :src="urlFile('work/detial/empty.png')" :preview="false"></a-image>
        </a-row>
        <a-row justify="center">
          <div>暂无日程</div>
        </a-row>
      </template>
    </div>
  </a-spin>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'
import * as calendarApi from '@/service/assist/calendar'
import { useCalendarSearch } from '@/views/oa/assist/myCalender/hook.ts'
import dayjs, { Dayjs } from 'dayjs'

const props = defineProps<{
  calendarType: string,
  date: Dayjs | string,
}>()


const loading = ref<boolean>(false)
const data = ref<any[]>([])
const emits = defineEmits(['backData'])

const getData = async () => {
  loading.value = true;
  try {
    data.value = await useCalendarSearch('day', props.date);
    data.value.sort((a, b) => dayjs(`2024-08-31 ${a.starttime}`) - dayjs(`2024-08-31 ${b.starttime}`))
    emits('backData', data.value)
  } catch (error) {}
  loading.value = false;
}

watch(() => [props.calendarType, props.date], 
  (nval, oval) => {
    getData()
}, { immediate: true, deep: true })

defineExpose({
  getData
})


</script>

<style lang='scss' scoped>
.u-date-text {
  font-family: DIN, DIN;
  font-weight: 500;
  font-size: var(--font-size-level-1);
  color: #666666;
}
.u-detil-box {
  width: 100%; 
  padding: 10px;
  background: var(--bg);
  border-radius: 4px;
}
.u-detial-title{
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #333333;
}
.u-detial-desc {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
</style>